<template>
    <div class="studentList">
        <!-- 查询、重置 -->
        <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                size="small">
            <el-form-item>
                <el-input
                        v-model="pagination.bussinessCode"
                        placeholder="请输入编号"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                        v-model="pagination.bussinessName"
                        placeholder="请输入店铺名"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="pagination.bussinessStatus" placeholder="状态">
                    <el-option label="" value=""></el-option>
                    <el-option label="封禁" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="find()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="bussinessAccountName" label="账号" align="center">
            </el-table-column>
            <el-table-column prop="bussinessCode" label="编号" align="center">
            </el-table-column>
            <el-table-column prop="bussinessName" label="店铺名" align="center">
            </el-table-column>
            <el-table-column prop="linkMan" label="联系人" align="center">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式" align="center">
            </el-table-column>
            <el-table-column prop="bankName" label="开户行" align="center">
            </el-table-column>
            <el-table-column prop="bankAccount" label="银行卡号" align="center">
            </el-table-column>
            <el-table-column prop="state_text" label="状态" align="center">
            </el-table-column>
            <el-table-column   label="操作">
                <template slot-scope="scope">
                    <el-button :type="scope.row.bussinessStatus==1 ?'danger':'primary'" @click="setY(scope.row)" >{{ scope.row.bussinessStatus?'封禁':'解禁'}}</el-button>
                </template>
            </el-table-column>
            <!--            <el-table-column  label="封禁" prop="bussinessStatus" align="center">-->
            <!--                <template slot-scope="scope">-->
            <!--                    <el-button-->
            <!--                            type="success"-->
            <!--                            :v-text="dataList.bussinessStatus"-->
            <!--                            @click="setY(scope.row)"-->
            <!--                    ></el-button>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
        </el-table>
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total"
        >
        </el-pagination>
    </div>
</template>
<script>
    import {getBussMsgData} from "../../../api/api";
    import {setBussStopStatus} from "../../../api/api";

    export default {
        data() {
            return {
                dataList: [],
                search: {},
                pagination: {
                    currentPage: 1, //当前页数
                    pageSize: 10, // 每页显示条数
                    total: 0, // 总条数
                    bussinessStatus: "",
                    bussinessName: "",
                    bussinessCode: ""
                },

                formInline: {
                    name: "",
                },
            };
        },
        created() {
            this.getData();
        },
        computed: {},
        methods: {
            find() {
                this.getData()
            },
            reset() {
                this.pagination.bussinessStatus = "",
                    this.pagination.bussinessName = "",
                    this.pagination.bussinessCode = ""
            },
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getData();
            },
            getData() {
                console.log(this.pagination)
                getBussMsgData(this.pagination).then((res) => {
                    if (res.data.status === 200) {
                        console.log(res.data)
                        this.dataList = res.data.data.records;
                        this.pagination.total = res.data.data.total;
                        this.dataList.forEach((item) => {
                            // 尽量不要修改原数据
                            item.bussinessStatus == "0"
                                ? (item.state_text = "封禁")
                                : (item.state_text = "正常");
                        });
                    }
                });
            },
            setY(row) {
                if (row.bussinessStatus==1){
                    row.bussinessStatus = "0";
                    setBussStopStatus(row).then((res) => {
                        if (res.data.status === 200) {
                            this.getData();
                        }
                    });
                }else {
                    row.bussinessStatus = "1";
                    setBussStopStatus(row).then((res) => {
                        if (res.data.status === 200) {
                            this.getData();
                        }
                    });
                }

            },
        },
    };
</script>
<style lang="scss">
    .studentList {
        .demo-form-inline, .el-form-item {
            text-align: left;
        }

        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>
